<template>
  <div>
    <!--查询表单-->
    <el-card shadow="never">
      <el-form
        :inline="true"
        class="demo-form-inline"
      > <el-form-item label="名称"> <el-input
          v-model="searchObj.name"
          placeholder="讲师名"
        /> </el-form-item> <el-form-item label="头衔"> <el-select
          v-model="searchObj.level"
          clearable
          placeholder="头衔"
        > <el-option
          value="1"
          label="高级讲师"
        /> <el-option
          value="0"
          label="首席讲师"
        /> </el-select> </el-form-item> <el-form-item label="入驻时间"> <el-date-picker
          v-model="searchObj.joinDateBegin"
          placeholder="开始时间"
          value-format="yyyy-MM-dd"
        /> </el-form-item> <el-form-item label="-"> <el-date-picker
          v-model="searchObj.joinDateEnd"
          placeholder="结束时间"
          value-format="yyyy-MM-dd"
        /> </el-form-item> <el-button
          type="primary"
          icon="el-icon-search"
          @click="fetchData()"
        >查询</el-button> <el-button
          type="default"
          @click="resetData()"
        >清空</el-button>

        <el-button class="btn-add" style="margin-left: 10px;" @click="add()">添加</el-button>
        <el-button class="btn-add" @click="batchRemove()">批量删除</el-button>
      </el-form>

    </el-card>

    <!-- 表格 -->
    <el-table
      :data="list"
      border
      stripe
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" />
      <el-table-column
        label="#"
        width="50"
      >
        <template slot-scope="scope">
          {{ (page - 1) * limit + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        label="名称"
        width="80"
      />
      <el-table-column
        label="头衔"
        width="90"
      >
        <template slot-scope="scope">
          <el-tag
            v-if="scope.row.level === 1"
            type="success"
            size="mini"
          >高级讲师</el-tag>
          <el-tag
            v-if="scope.row.level === 0"
            size="mini"
          >首席讲师</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="intro"
        label="简介"
      />
      <el-table-column
        prop="sort"
        label="排序"
        width="60"
      />
      <el-table-column
        prop="joinDate"
        label="入驻时间"
        width="160"
      />
      <el-table-column
        label="操作"
        width="200"
        align="center"
      >
        <template slot-scope="scope">
          <el-button
            type="text"
            size="mini"
            @click="removeById(scope.row.id)"
          >删除</el-button>
          <router-link :to="'/vod/teacher/edit/'+scope.row.id">
            <el-button
              type="text"
              size="mini"
            >修改</el-button>
          </router-link>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <el-pagination
      :current-page="page"
      :total="total"
      :page-size="limit"
      :page-sizes="[5, 10, 20, 30, 40, 50, 100]"
      style="padding: 30px 0; text-align: center;"
      layout="total, sizes, prev, pager, next, jumper"
      @size-change="changePageSize"
      @current-change="changeCurrentPage"
    />

  </div>
</template>

<script>
import teacherApi from '@/api/vod/teacher'

export default {
  name: 'VueAdminTemplateMasterList',

  // eslint-disable-next-line space-before-function-paren
  data () {
    return {
      list: [], // 讲师列表
      total: 0, // 总记录数
      page: 1, // 页码
      limit: 10, // 每页记录数
      searchObj: {}, // 查询条件
      multipleSelection: [] // 批量删除选中的记录列表

    }
  },

  // eslint-disable-next-line space-before-function-paren
  mounted () {
    this.fetchData()
  },

  methods: {
    // eslint-disable-next-line space-before-function-paren
    fetchData () {
      teacherApi.pageList(this.page, this.limit, this.searchObj).then(response => {
        // debugger
        this.list = response.data.records
        this.total = response.data.total
      })
    },
    // 页面改变的使用的操作
    changePageSize(val) {
      this.limit = val
      this.fetchData()
    },
    changeCurrentPage(val) {
      this.page = val
      this.fetchData()
    },
    // 重置表单数据
    resetData() {
      this.searchObj = {}
      this.fetchData()
    },
    // 删除讲师
    removeById(id) {
      this.$confirm('此操作是永久删除该纪录，是否继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        return teacherApi.removeById(id)
      }).then(response => {
        this.$message.success(response.message)
        this.fetchData()
      })
    },
    // 批量删除操作处理
    batchRemove() {
      // console.log('要删除的信息')
      // console.log(this.multipleSelection)
      if (this.multipleSelection.length === 0) {
        this.$message.warning('请选择要删除的讲师信息')
      }
      this.$confirm('此操作将会永久删除这些记录，是否继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        var idList = []
        this.multipleSelection.forEach(element => {
          idList.push(element)
        })

        return teacherApi.batchRemove1(idList)
      }).then(response => {
        this.$message.success(response.message)
        this.fetchData()
      })
    },
    // 表单选择的时候发生变化信息
    handleSelectionChange(data) {
      this.multipleSelection = []
      data.forEach(element => {
        this.multipleSelection.push(element.id)
        // console.log(this.multipleSelection)
      })
    },
    // 添加按钮 跳转操作
    add() {
      this.$router.push({ path: '/vod/teacher/create' })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
